<template>
  <div class="content">
    <deviceDetails :is="currentTab"></deviceDetails>
    <div class="tab">
      <ul class="tabList">
        <li class="tabListItem" @click="goDetail('deviceDetails',99)" :class="[activeIndexs==99?'active':'']"><text class="text" :class="[activeIndexs==99?'active':'']">设备档案</text></li>
        <li class="tabListItem" @click="goDetail(item.XTMK,index)" :class="[activeIndexs== index?'active':'']" v-for="(item, index) in datalist" :key="index">
          <text class="text" :class="[activeIndexs==index?'active':'']">{{item.TITLE}}</text>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { getCache } from '@/util/storageUtils.js';
import { CTCE_DATALIST } from '@/config/storageTypes.js';
import deviceDetails from '@/components/details/deviceManagement/deviceDetails.vue';
import temperature from '@/components/details/deviceManagement/temperature.vue';
import location from '@/components/details/deviceManagement/location.vue';
import historyData from '@/components/details/deviceManagement/historyData.vue';

export default {
  name: 'pFootBar',
  data () {
    return {
      currentTab: 'deviceDetails',
      pIndexKey: 'deviceDetails',
      isLineKey: 'deviceDetails',
      datalist: [],
      activeIndexs:99
    }
  },
  components: {
    deviceDetails,
    temperature,
    location,
    historyData
  },
  beforeCreate () {
    this.$notice.loading.show()
    this.$navigator.setLeftItem({
      text: '   ',
      fontSize: '40',
      fontWeight: 'bold'
    }, () => {
      this.$router.back()
    })
  },
  created () {
    getCache(CTCE_DATALIST).then(res => {
      this.data = JSON.parse(res)
      for(let i = 0, len = this.data.length; i < len; i++) {
        if(this.data[i].DISPMKXZ === '02' && (this.data[i].TITLE === '设备定位' || this.data[i].TITLE === '历史数据' || this.data[i].TITLE === '温度曲线')){
          this.datalist.push(this.data[i])
        }
      }
    })
  },
  methods: {
    goDetail (_key, index) {
      this.activeIndexs = index;
      switch(_key){
        case '0203': // 设备定位
          this.currentTab = 'location';
        break;
        case '0205': // 历史数据
          this.currentTab = 'historyData';
        break;
        case '0206': // 温度曲线
          this.currentTab = 'temperature';
        break;
        default:
          this.currentTab = 'deviceDetails'
      }
      if(this.pIndexKey === _key) return;
      this.pIndexKey = _key;
    },
    isActive (_c) {
      return this.pIndexKey === _c ?'active':''
    }
  }
}
</script>
<style scoped>
.content{
  width: 750px;
}
.tab{
  width: 750px;
  height: 65px;
  border-top-color: #f5f5f5;
  border-top-style: solid;
  border-top-width: 1px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}
.tabList{
  width: 750px;
  height: 65px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.tabListItem{
  width: 187.5px;
  height: 65px;
  justify-content: center;
  align-items: center;
}
.text{
  font-size: 29.1px;
  font-family:PingFangSC-Regular;
  color:rgba(204,204,204,1);
}
.active{
  background-color: rgba(62,175,252,1);
  color: #fff;
}
</style>
